<!-- 颜色属性定义：蹇泽阳 -->
<template>
  <div class="app-container">
    <div class="flex">
      <JFind :searchTitle="'单色系筛选条件查询'" :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
      <JFind
        :className="'Find2'"
        :searchTitle="'插色系筛选条件查询'"
        :OriginalFilter="{ static: true }"
        :formList="formList2"
        @findClicked="findClicked2"
      />
    </div>

    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '0px' }">
      <div style="display: flex">
        <div>
          <h1>单色系明细</h1>
          <Table
            :tableHeader="tableHeader"
            :tableData="tableData"
            @sortChange="sortChange"
            class="mt5"
            :isLoading="isLoading"
            :getTableList="getTableList"
            @confirmChange="confirmChange"
            @currentRow="currentRow"
            :outTableHeight="-30"
          />
          <PageModule
            :PageData="{ total, pageShow: false, pageSizeShow: true, buttonS: true }"
            @pageSizeChange="handleSizeChange"
            @pageChange="handleCurrentChange"
          />
        </div>
        <div style="margin-left: 50px; width: 40%">
          <h1>插色系明细</h1>
          <Table
            :outTableHeight="-30"
            :tableHeader="tableHeader1"
            :tableData="tableData2"
            class="mt5"
            :isLoading="isLoading2"
            @currentRow="currentRow2"
            @confirmChange="confirmChange"
            :getTableList="getTableList2"
          />
          <PageModule :PageData="{ total: total2 }" :layout="'prev, pager'" @pageSizeChange="handleSizeChange2" @pageChange="handleCurrentChange2" />
        </div>
      </div>
    </el-card>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'ColorAttributeDefinition1'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import LoginWork from '@/utils/LoginWork'
import service from '@/utils/request'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import { onMounted, ref, watch } from 'vue'
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入PANTONE',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单色系颜色(中)',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入单色系颜色(英)',
    inputValue: ''
  },

  {
    type: 'button',
    checkboxLabel: '插入',
    bgColor: '#67C23A'
  },
  {
    type: 'button',
    checkboxLabel: '删除',
    bgColor: '#F56C6C'
  }
])
const formList2 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入材料颜色',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '插色系插入'
  },
  {
    type: 'button',
    checkboxLabel: '单色系材料颜色'
  },
  {
    type: 'button',
    checkboxLabel: '插色系删除'
  },
  {
    type: 'input',
    inputPlaceholder: '请输入插色系颜色(英)',
    inputValue: ''
  }
]) as any

const tableHeader = ref([
  {
    change: true,
    label: '色系',
    prop: 'colorSystem'
  },
  {
    change: true,
    sortable: 'custom',
    label: '颜色编号',
    prop: 'colorCode'
  },
  {
    change: true,
    sortable: 'custom',
    label: '材料颜色',
    prop: 'colorName',
    width: 180
  },
  {
    width: 120,
    change: true,
    label: '颜色(中)',
    prop: 'color'
  },
  {
    change: true,
    label: 'PANTONE',
    prop: 'pantone',
    width: 120
  },
  {
    label: '颜色(英)',
    prop: 'engColor',
    width: 150
  }
])

const tableData2 = ref([])

const tableHeader1 = ref([
  {
    change: true,
    label: '色系',
    prop: 'colorSystem'
  },
  {
    change: true,
    label: '颜色编号',
    prop: 'colorCode'
  },
  {
    change: true,
    label: '材料颜色',
    prop: 'colorName',
    width: 200
  },
  {
    label: '颜色(英)',
    prop: 'engColor'
  }
])

// 表一模块
// 置空按钮
let str = ''
const findClicked = async (content: string) => {
  if (content === '插入') {
    let res = await LoginWork.post<any, any>('/ColorAttribute/getMonochromeAdd', {
      pantone: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入PANTONE'
      )?.inputValue,
      color: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单色系颜色(中)'
      )?.inputValue,
      engColor: formList.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单色系颜色(英)'
      )?.inputValue
    })
    JMessage.success(res.message)
    getTableList()
    formList.value[0].inputValue = ''
    formList.value[1].inputValue = ''
    formList.value[2].inputValue = ''
  }
  if (content === '删除') {
    const { colorSystem, colorName } = tableDataCurrentRow.value
    console.log(colorSystem, colorName)
    let res = await LoginWork.post<any, any>(`/ColorAttribute/getMonochromeDel`, {
      colorSystem,
      colorName
    })
    JMessage.success(res.message)
    getTableList()
  }
}
const findClicked2 = async (content: string) => {
  if (content === '单色系材料颜色') {
    if (str === '') {
      str = `${tableDataCurrentRow.value.pantone}${tableDataCurrentRow.value.color}` as any
    } else {
      str = (str + `/${tableDataCurrentRow.value.pantone}${tableDataCurrentRow.value.color}`) as any
    }
    ;(
      formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料颜色'
      ) as any
    ).inputValue = str
  }
  if (content === '插色系插入') {
    if (
      formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料颜色'
      )?.inputValue.length > 50
    ) {
      JMessage.error('材料颜色长度不能超过50个字符')
      return
    }
    let res = await LoginWork.post<any, any>('/ColorAttribute/getPolychromeAdd', {
      colorName: formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料颜色'
      )?.inputValue,
      engColor: formList2.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入插色系颜色(英)'
      )?.inputValue
    })
    ElMessage.info(res.message)
    getTableList2()
  }
  if (content === '插色系删除') {
    const { colorSystem, colorName } = tableDataCurrentRow2.value
    // console.log(colorSystem, colorName);
    let res = await LoginWork.post<any, any>(`/ColorAttribute/getMonochromeDel`, {
      colorSystem,
      colorName
    })
    ElMessage.info(res.message)
    getTableList2()
  }
}
const tableData = ref([])
const isLoading = ref(true)
const isLoading2 = ref(true)
// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>('/ColorAttribute/getMonochromeList', {
    color: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单色系颜色(中)'
    )?.inputValue,
    engColor: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入单色系颜色(英)'
    )?.inputValue,
    pantone: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入PANTONE'
    )?.inputValue,
    sort: order.value,
    pageNum: currentPage.value,
    pageSize: pageSize.value
  })
  isLoading.value = false
  tableData.value = tableDataList.monochromeList.map((item: any) => {
    item.change = 'Y'
    return item
  })
  total.value = tableDataList.total
  // currentRow()
}, 500)
// 分页器
const currentPage2 = ref(1)
const pageSize2 = ref(40)
const total2 = ref(0)
const handleSizeChange2 = (val: number) => {
  pageSize2.value = val
  getTableList2()
}
const handleCurrentChange2 = (val: number) => {
  currentPage2.value = val
  getTableList2()
}
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList2 = await service.post<any, any>('/ColorAttribute/getPolychromeList', {
    colorName: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料颜色'
    )?.inputValue,
    engColor: formList2.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入插色系颜色(英)'
    )?.inputValue,
    pageNum: currentPage2.value,
    pageSize: pageSize2.value
  })
  isLoading2.value = false
  tableData2.value = tableDataList2.polychromeList.map((item: any) => {
    item.change = 'Y'
    return item
  })
  total2.value = tableDataList2.total
  // currentRow()
}, 500)

onMounted(() => {
  getTableList()
  getTableList2()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
watch(
  () =>
    formList2.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList2()
  }
)
// 表格排序
const order = ref('')
const sortChange = (sort: any, prop: any, column: any) => {
  console.log(sort, prop, column)
  if (sort === 'ascending' && prop === 'colorCode') {
    console.log('升序')
    order.value = '1'
  } else if (sort === 'descending' && prop === 'colorCode') {
    console.log('降序')
    order.value = '2'
  } else if (sort === null && prop === 'colorCode') {
    order.value = ''
  }

  if (sort === 'ascending' && prop === 'colorName') {
    console.log('升序')
    order.value = '3'
  } else if (sort === 'descending' && prop === 'colorName') {
    console.log('降序')
    order.value = '4'
  } else if (sort === null && prop === 'colorName') {
    order.value = ''
  }
  getTableList()
}
const tableDataCurrentRow = ref<any>() as any
const currentRow = (row: any) => {
  tableDataCurrentRow.value = row
}
const tableDataCurrentRow2 = ref<any>() as any
const currentRow2 = (row: any) => {
  tableDataCurrentRow2.value = row
}

// 确认修改
const confirmChange = async (row: any) => {
  await service.put('/ColorAttribute/getMonochromeUpdate', row)
  ElMessage({
    type: 'success',
    message: '修改成功'
  })
}
</script>

<style lang="less" scoped>
h1 {
  font-size: 16px;
}

:deep(.Find2 .el-form-item:nth-last-child(5)) {
  .el-input {
    width: 280px;
  }
}
</style>

<style>
.app-main {
  background-color: white !important;
}
</style>
